<template>
	<view class="line">
		<view class="mapBox">
			<map v-if="detailInfo.id" style="width: 100%;height: 900rpx;" :markers="detailInfo.markers" :latitude="detailInfo.location[0]" :longitude="detailInfo.location[1]" :show-scale="true"></map>
		</view>
		<view class="infos">
		    <view class="tit">
		        当前游玩项目 {{ detailInfo.title }}
		    </view>
		    <view class="stars">
		        <text>项目推荐: </text>
		        <up-rate :count="count" v-model="detailInfo.count"></up-rate>
		    </view>
		    <view class="scrollView">
		        <up-scroll-list
		            :indicator="true"
		            indicatorColor="#ffff0f0"
		            indicatorActiveColor="#ff5c6c6"
		        >
		            <view class="items" v-for="(item, index) in detailInfo.other" :key="item.id">
						<image class="img" :src="item.url" mode="aspectFill"></image>
						<view class="title">{{item.name}}</view>
					</view>
		        </up-scroll-list>
		    </view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { getProjectInfo } from '../../api/api';
	import { ref, reactive } from 'vue'
	const detailInfo = ref({})
	onLoad((props)=>{
		getProjectInfo({ id: props.id }).then(data=>{
			console.log(data)
			detailInfo.value = data
		})
	})

</script>

<style lang="scss" scoped>
	.infos {
	    padding: 20rpx;
	    box-sizing: border-box;
	    
	    .tit {
	        font-size: 34rpx;
	        font-weight: 600;
	        color: #333;
	    }
	    
	    .stars {
	        font-size: 28rpx;
	        margin: 20rpx 0 40rpx;
	        display: flex;
	        align-items: center;
	    }
	    
	    .items {
	        margin-right: 20rpx;
	        text-align: center;
	    }
	    
	    .img {
	        width: 320rpx;
	        height: 200rpx;
	        border-radius: 14rpx;
	    }
		
		.title{
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
		}
	}
</style>
